import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorScheme: const ColorScheme(
              primary: Colors.black,
              surfaceVariant: Colors.white,
              secondary: Colors.green,
              background: Colors.white, //整个页面背景色
              error: Colors.red,
              brightness: Brightness.light,
              onBackground: Colors.white,
              outlineVariant: Colors.white,
              onError: Colors.yellow,
              onPrimary: Colors.white,
              onSecondary: Colors.white,
              onSurface: Color.fromARGB(255, 233, 233, 240),
              surface: Colors.blue) //整个标题栏颜色
          // primarySwatch: Colors.blue, // 设置主色调,无效，怎么设都是白色
          ),
      home: Scaffold(
        appBar: AppBar(title: const Text("P27"), centerTitle: true),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size; //获取屏幕宽度高度

    return Stack(
      children: [
        ListView(
          padding: const EdgeInsets.only(top: 50),
          children: const [
            ListTile(
                title:
                    Text("i am a list1", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list2", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list3", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list4", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list5", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list6", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list7", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list8", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list9", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list10", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list11", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list12", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list13", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list14", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list15", style: TextStyle(color: Colors.red))),
            ListTile(
                title:
                    Text("i am a list16", style: TextStyle(color: Colors.red))),
          ],
        ),
        Positioned(
            left: 0,
            top: 0,
            width: size.width,
            height: 44,
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    alignment: Alignment.center,
                    height: 44,
                    color: Colors.red,
                    child: const Text("Second dire",
                        style: TextStyle(color: Colors.white)),
                  ),
                )
              ],
            ))
        //宽高写在子组件效果一样
        //  Positioned(
        // left: 0,
        // bottom: 0,
        // child: Container(
        //   width: size.width, //配置子元素的宽度高度
        //   height: 44, //配置子元素的宽度高度
        //   alignment: Alignment.center,
        //   color: Colors.red,
        //   child: const Text("Second dire",
        //       style: TextStyle(color: Colors.white)),
        // ))
      ],
    );
  }
}
